<template>
	<div class="drag" ref="dragDiv">
		<div class="drag_bg"></div>
		<div class="drag_text">{{confirmWords}}</div>
		<div ref="moveDiv" @mousedown="mousedownFn($event)" :class="{'handler_ok_bg':confirmSuccess}" class="handler handler_bg"
		 style="position: absolute;top: 0px;left: 0px;"></div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				beginClientX: 0,
				/*距离屏幕左端距离*/
				mouseMoveStata: false,
				/*触发拖动状态  判断*/
				maxwidth: '',
				/*拖动最大宽度，依据滑块宽度算出来的*/
				confirmWords: '拖动滑块验证',
				/*滑块文字*/
				confirmSuccess: false /*验证成功判断*/
			}
		},
		props: ['posphone','pospassword'],
		methods: {
			mousedownFn: function(e) {
				if (!this.confirmSuccess) {
					e.preventDefault && e.preventDefault(); //阻止文字选中等 浏览器默认事件
					this.mouseMoveStata = true;
					this.beginClientX = e.clientX;
				}
			}, //mousedoen 事件
			successFunction() {
				if(this.posphone == '' || this.pospassword == ''){
					document.getElementsByClassName('handler')[0].style.left = 0 + 'px';
					document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px';
					this.mouseMoveStata = false
					this.beginClientX = 0
					this.maxwidth = ''
					this.confirmWords = '拖动滑块验证'
					this.confirmSuccess = false
					return this.$emit('ztai',false)
				}
				this.confirmSuccess = true
				this.$emit('ztai',this.confirmSuccess)
				this.confirmWords = '验证通过';
				if (window.addEventListener) {
					document.getElementsByTagName('html')[0].removeEventListener('mousemove', this.mouseMoveFn);
					document.getElementsByTagName('html')[0].removeEventListener('mouseup', this.moseUpFn);
          document.getElementsByTagName('html')[0].removeEventListener('touchstart', this.mouseMoveFn);
          document.getElementsByTagName('html')[0].addEventListener('touchmove', this.touchMoveFun);
          document.getElementsByTagName('html')[0].removeEventListener('touchend', this.moseUpFn);
				} else {
					document.getElementsByTagName('html')[0].removeEventListener('mouseup', () => {});
				}
				document.getElementsByClassName('drag_text')[0].style.color = '#fff'
				document.getElementsByClassName('handler')[0].style.left = this.maxwidth + 'px';
				document.getElementsByClassName('drag_bg')[0].style.width = this.maxwidth + 'px';
			}, //验证成功函数
			mouseMoveFn(e) {
				if (this.mouseMoveStata) {
					let width = e.clientX - this.beginClientX;
					if (width > 0 && width <= this.maxwidth) {
						document.getElementsByClassName('handler')[0].style.left = width + 'px';
						document.getElementsByClassName('drag_bg')[0].style.width = width + 'px';
					} else if (width > this.maxwidth) {
						this.successFunction();
					}

				}
			}, //mousemove事件
			moseUpFn(e) {
				this.mouseMoveStata = false;
				var width = e.clientX - this.beginClientX;
				if (width < this.maxwidth) {
					document.getElementsByClassName('handler')[0].style.left = 0 + 'px';
					document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px';
				}
			}, //mouseup事件
      //开始
      touchstartFun(e){
         if (!this.confirmSuccess) {
          e.preventDefault && e.preventDefault(); //阻止文字选中等 浏览器默认事件
          this.mouseMoveStata = true;
          this.beginClientX = e.touches[0].clientX;
         }
      },
      //移动
      touchMoveFun(e){
       let width = e.touches[0].clientX - this.beginClientX;
       if (width > 0 && width <= this.maxwidth) {
       	document.getElementsByClassName('handler')[0].style.left = width + 'px';
       	document.getElementsByClassName('drag_bg')[0].style.width = width + 'px';
       } else if (width > this.maxwidth) {
       	this.successFunction();
       }
      },
      //结束
      touchendFun(e){
        // let width = e.touches[0].clientX;
       this.mouseMoveStata = false;
       var width = e.changedTouches[0].clientX - this.beginClientX;
       if (width < this.maxwidth) {
       	document.getElementsByClassName('handler')[0].style.left = 0 + 'px';
       	document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px';
       }
      }
		},
		mounted() {
			this.maxwidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth;
			document.getElementsByTagName('html')[0].addEventListener('mousemove', this.mouseMoveFn);
			document.getElementsByTagName('html')[0].addEventListener('mouseup', this.moseUpFn)
      document.getElementsByTagName('html')[0].addEventListener('touchstart', this.touchstartFun);
      document.getElementsByTagName('html')[0].addEventListener('touchmove', this.touchMoveFun);
      document.getElementsByTagName('html')[0].addEventListener('touchend', this.touchendFun);
		}
	}
</script>

<style scoped>
	.drag {
		position: relative;
		background-color: #e8e8e8;
		width: 100%;
		height: 34px;
		line-height: 34px;
		text-align: center;
	}

	.handler {
		width: 40px;
		height: 32px;
		border: 1px solid #ccc;
		cursor: move;
	}

	.handler_bg {
		background: #fff url("") no-repeat center;
	}

	.handler_ok_bg {
		background: #fff url("") no-repeat center;
	}

	.drag_bg {
		background-color: #7ac23c;
		height: 34px;
		width: 0px;
	}

	.drag_text {
		position: absolute;
		top: 0px;
		width: 100%;
		text-align: center;
		-moz-user-select: none;
		-webkit-user-select: none;
		user-select: none;
		-o-user-select: none;
		-ms-user-select: none;
	}
</style>
